<template>
  <scroll-view class="future-content" scroll-x="true" @touchstart="handleTouchStart" @touchmove="handleTouchMove">
    <view class="charts-box">
      <qiun-data-charts type="line" :opts="opts" :chartData="chartData" background="transparent" :loadingType="0" />
    </view>
    <view class="content-nav" v-for="item,index in listData" :key="index">
      <view class="highest-nav">
        <view class="highest-week">{{item.weekstate? item.weekstate :item.week}}</view>
        <view class="highest-date">{{item.fxDate}}</view>
        <!-- <view class="highest-calendar">{{item.moment}}</view> -->
        <view class="highest-icon">
          <image :src="item.textDayImg" mode=""></image>
        </view>
        <view class="highest-text">{{item.textDay}}</view>
      </view>
      <view class="minimum-nav">
        <view class="minimum-text">{{item.textNight}}</view>
        <view class="minimum-icon">
          <image :src="item.textNightImg" mode=""></image>
        </view>
        <view class="minimum-week">{{item.direction?item.direction:item.windDirDay}}</view>
        <view class="minimum-date">{{item.speed?item.speed:item.windSpeedDay+'级'}}</view>
        <view class="quality-air" :class="item.airQuality=='优'?'excellent':item.airQuality=='良'?'fine':'wrong'"
          v-if="item.airQuality">
          {{item.airQuality}}
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
  import {
    ref,
    defineProps,
    defineEmits,
    watch
  } from 'vue'
  import {
    onLoad,
    onLaunch,
  } from '@dcloudio/uni-app'
  const props = defineProps({
    listData: Array,
    tempMinList: Array,
    tempMaxList: Array
  });
  // const {
  //   listData,
  //   tempMaxList,
  //   tempMinList
  // } = defineProps(["listData", "tempMinList", "tempMaxList"])
  // const emit = defineEmits(['deletePic', 'uploadFile', 'UploadAvatar'])
  const chartData = ref({})
  const opts = ref({
    color: ["rgba(255, 255, 255, 0.4)", "rgba(255, 255, 255, 0.4)"],
    padding: [15, 10, 0, 15],
    enableScroll: false,
    fontColor: 'rgba(255, 255, 255, 0.8)',
    dataPointShapeType: "hollow",
    duration: '500',
    animation: false,
    legend: {
      show: false
    },
    series: {
      pointShape: 'none',
      legendShape: 'none'
    },
    xAxis: {
      lineHeight: 50,
      axisLineColor: 'transparent',
      fontColor: 'transparent',
    },
    yAxis: {
      disabled: true,
      disableGrid: true,
      showTitle: true,
    },
    extra: {
      markLine: {
        labelFontColor: "rgba(255, 255, 255, 0.8)"
      },
      tooltip: {
        showBox: false,
        gridColor: 'transparent',
      },
      line: {
        type: "straight",
        width: 2,
        activeType: "hollow"
      }
    }
  })
  watch(() => props.tempMaxList, (newValue, oldValue) => {
    getServerData()
  });
  onLoad(() => {
    getServerData()
  })

  function getServerData() {
    let res = {
      categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
      series: [{
          name: "最高温度",
          data: props.tempMaxList
        },
        {
          name: "最低温度",
          data: props.tempMinList
        }
      ]
    };
    chartData.value = JSON.parse(JSON.stringify(res));
  }
</script>

<style lang="scss" scoped>
  ::v-deep .uni-scroll-view-content {
    display: flex;
  }

  .future-content {
    min-height: 772rpx;
    display: flex;
    overflow-x: scroll;
    margin-top: 24rpx;
    position: relative;

    .content-active {
      background: rgba(255, 255, 255, 0.2);
    }

    .content-nav {
      height: 772rpx;
      width: 136rpx;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 24rpx;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      padding: 16rpx 0;
      flex-shrink: 0;
      justify-content: space-between;

      .highest-nav,
      .minimum-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .highest-week &.highest-text {
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);

      }

      .highest-icon,
      .minimum-icon {
        height: 56rpx;
        width: 56rpx;
        margin-top: 28rpx;

        image {
          height: 56rpx;
          width: 56rpx;
        }
      }

      .quality-air {
        width: 64rpx;
        height: 32rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 16rpx;
      }

      .excellent {
        background: rgba(99, 196, 121, 1);

      }

      .fine {
        background: rgba(234, 209, 67, 1);
      }

      .wrong {
        background: rgba(255, 107, 107, 1);
      }
    }
  }

  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 2074rpx;
    height: 300rpx;
    position: absolute;
    top: 50%;
    transform: translate(-25rpx, -50%);
  }
</style>